<template>
  <div class="change-password">
    <van-nav-bar
      title="修改密码"
      left-arrow
      @click-left="router.back()"
    />
    
    <div class="form-container">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="formData.oldPassword"
            type="password"
            name="oldPassword"
            label="当前密码"
            placeholder="请输入当前密码"
            :rules="[{ required: true, message: '请输入当前密码' }]"
          />
          
          <van-field
            v-model="formData.newPassword"
            type="password"
            name="newPassword"
            label="新密码"
            placeholder="请输入新密码"
            :rules="passwordRules"
          />
          
          <van-field
            v-model="formData.confirmPassword"
            type="password"
            name="confirmPassword"
            label="确认新密码"
            placeholder="请再次输入新密码"
            :rules="confirmPasswordRules"
          />
        </van-cell-group>
        
        <div class="submit-btn">
          <van-button round block type="primary" native-type="submit" :loading="loading">
            确认修改
          </van-button>
        </div>
      </van-form>
      
      <div class="tips">
        <p>密码修改提示：</p>
        <ul>
          <li>密码长度为8-20个字符</li>
          <li>必须包含字母和数字</li>
          <li>建议使用字母、数字和符号的组合</li>
          <li>不要使用与其他网站相同的密码</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()
const loading = ref(false)

const formData = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 密码验证规则
const passwordRules = [
  { required: true, message: '请输入新密码' },
  { min: 8, max: 20, message: '密码长度为8-20个字符' },
  { 
    validator: (val: string) => /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(val), 
    message: '密码必须包含字母和数字' 
  }
]

// 确认密码验证规则
const confirmPasswordRules = computed(() => [
  { required: true, message: '请再次输入新密码' },
  { 
    validator: (val: string) => val === formData.value.newPassword, 
    message: '两次输入的密码不一致' 
  }
])

// 提交表单
const onSubmit = async () => {
  try {
    loading.value = true
    
    // 调用修改密码API
    await userStore.changePassword({
      oldPassword: formData.value.oldPassword,
      newPassword: formData.value.newPassword
    })
    
    showDialog({
      title: '修改成功',
      message: '密码已成功修改，请重新登录',
      confirmButtonText: '确定'
    }).then(() => {
      // 退出登录并跳转到登录页
      userStore.logout()
      router.replace('/auth/login')
    })
  } catch (error: any) {
    showToast(error.message || '修改密码失败')
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.change-password {
  min-height: 100vh;
  background-color: #f7f8fa;
  
  .form-container {
    padding: 20px 16px;
  }
  
  .submit-btn {
    margin: 24px 16px;
  }
  
  .tips {
    margin: 16px;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;
    font-size: 14px;
    color: #646566;
    
    p {
      margin: 0 0 8px;
      font-weight: 500;
      color: #323233;
    }
    
    ul {
      margin: 0;
      padding-left: 16px;
      
      li {
        margin-bottom: 4px;
      }
    }
  }
}
</style>